<template>
  <div
    v-if="routerView"
    class="app-main-container"
  >
    <!--    <transition-->
    <!--      mode="out-in"-->
    <!--      name="fade-transform"-->
    <!--    >-->
    <keep-alive
      :include="cachedRoutes"
      :max="keepAliveMaxNum"
    >
      <router-view
        :key="key"
        class="app-main-height"
      />
    </keep-alive>
    <!--    </transition>-->
    <footer
      v-show="footerCopyright"
      class="footer-copyright"
    >
      Copyright
      <svg-icon class-name="copyright" />
      南京苏胜天信息科技有限公司 {{ fullYear }}
    </footer>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { copyright, footerCopyright, keepAliveMaxNum, title } from '@/config'

export default {
  name: 'VabAppMain',
  data() {
    return {
      show: false,
      fullYear: new Date().getFullYear(),
      copyright,
      title,
      keepAliveMaxNum,
      routerView: true,
      footerCopyright
    }
  },
  computed: {
    ...mapGetters({
      visitedRoutes: 'tabsBar/visitedRoutes',
      device: 'settings/device'
    }),
    cachedRoutes() {
      const cachedRoutesArr = []
      this.visitedRoutes.forEach((item) => {
        if (!item.meta.noKeepAlive) {
          cachedRoutesArr.push(item.name)
        }
      })
      return cachedRoutesArr
    },
    key() {
      return this.$route.path
    }
  },
  watch: {
    $route: {
      handler(route) {
        if (this.device === 'mobile') this.foldSideBar()
      },
      immediate: true
    }
  },
  created() {
    // 重载所有路由
    this.$baseEventBus.$on('reload-router-view', () => {
      this.routerView = false
      this.$nextTick(() => {
        this.routerView = true
      })
    })
  },
  mounted() {},
  methods: {
    ...mapActions({
    })
  }
}
</script>

<style lang="scss" scoped>
  .app-main-container {
    position: relative;
    width: 100%;
    height:  $base-app-main-height-no-tabs;
    overflow: hidden;
    .vab-keel {
      margin: $base-padding;
    }
    .app-main-height {
      min-height: $base-app-main-height-no-tabs;
    }

    .footer-copyright {
      min-height: 55px;
      line-height: 55px;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
      border-top: 1px dashed $base-border-color;
    }
  }
</style>
